<template>
  <!-- 列表部分 -->
  <div class="data-table">
    <el-table 
      :data="tableData" 
      style="width: 100%"
      @selection-change="handleSelectionChange"
      stripe
      border
      height="500"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="序号" width="80" />
      <el-table-column prop="addDate" label="添加日期" width="120" />
      <el-table-column prop="customerName" label="客户名称" min-width="150" />
      <el-table-column prop="contactPerson" label="联系人" width="120" />
      <el-table-column prop="contactPhone" label="联系电话" width="140" />
      <el-table-column prop="businessType" label="业务员" width="100" />
      <el-table-column prop="periodAmount" label="期初金额" width="120" align="right">
        <template #default="scope">
          {{ formatAmount(scope.row.periodAmount) }}
        </template>
      </el-table-column>
      <el-table-column prop="currentDebit" label="本期借方" width="120" align="right">
        <template #default="scope">
          {{ formatAmount(scope.row.currentDebit) }}
        </template>
      </el-table-column>
      <el-table-column prop="currentCredit" label="本期贷方" width="120" align="right">
        <template #default="scope">
          {{ formatAmount(scope.row.currentCredit) }}
        </template>
      </el-table-column>
      <el-table-column prop="currentBalance" label="本期下欠金额" width="140" align="right">
        <template #default="scope">
          {{ formatAmount(scope.row.currentBalance) }}
        </template>
      </el-table-column>
      <el-table-column prop="totalBalance" label="总下欠金额" width="140" align="right">
        <template #default="scope">
          {{ formatAmount(scope.row.totalBalance) }}
        </template>
      </el-table-column>
      <el-table-column prop="invoiceCount" label="往期设备数" width="120" align="center" />
      <el-table-column prop="customerStatus" label="客户状态" width="100" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.customerStatus === 1 ? 'success' : 'danger'">
            {{ scope.row.customerStatus === 1 ? '正常' : '停用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="customerLevel" label="客户等级" width="120" />
      <el-table-column prop="contactAddress" label="联系地址" min-width="200" />
      <el-table-column label="操作" width="180" fixed="right">
        <template #default="scope">
          <el-button type="primary" size="small" @click="handleView(scope.row)">
            查看
          </el-button>
          <el-button type="success" size="small" @click="handleEdit(scope.row)">
            编辑
          </el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  name: 'DataTable',
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    total: {
      type: Number,
      default: 0
    },
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 20
    }
  },
  emits: ['selection-change', 'view', 'edit', 'delete', 'page-change'],
  setup(props, { emit }) {
    const selectedRows = ref([])

    const handleSelectionChange = (selection) => {
      selectedRows.value = selection
      emit('selection-change', selection)
    }

    const handleView = (row) => {
      emit('view', row)
    }

    const handleEdit = (row) => {
      emit('edit', row)
    }

    const handleDelete = (row) => {
      emit('delete', row)
    }

    const handleSizeChange = (size) => {
      emit('page-change', { page: 1, size })
    }

    const handleCurrentChange = (page) => {
      emit('page-change', { page, size: props.pageSize })
    }

    const formatAmount = (amount) => {
      if (!amount && amount !== 0) return '0.00'
      return Number(amount).toFixed(2)
    }

    return {
      selectedRows,
      handleSelectionChange,
      handleView,
      handleEdit,
      handleDelete,
      handleSizeChange,
      handleCurrentChange,
      formatAmount
    }
  }
}
</script>

<style scoped>
.data-table {
  background: #fff;
  border-radius: 4px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding: 16px;
}

.el-table {
  font-size: 12px;
}

.el-table th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: bold;
}

.el-button--small {
  padding: 5px 8px;
  font-size: 12px;
}
</style>
